<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .dark {
        background-color: #000;
    }

    ::view-transition-new(root),
    ::view-transition-old(root) {
        animation: none;
    }

    #btn{
        position: absolute;
        left: 80%;
    }
</style>

<body>
    <button id="btn">按钮</button>
</body>
<script>
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', (e) => {
        console.log('click')
        const transition = document.startViewTransition(() => {
            document.documentElement.classList.toggle('dark')
        })

        // 拿到当前鼠标点击的位置（x,y）
        const x = e.clientX
        const y = e.clientY
        transition.ready.then(() => {
            document.documentElement.animate(
                {
                    // 从中心点开始变化
                    // clipPath: [`circle(0% at 50% 50%)`, `circle(100% at 50% 50%)`]
                    // 并且在这里由于是圆形切割，当从四周的顶点开始 100%半径的圆不能完整的覆盖全屏，所以目标切割圆为200%（根据实际调整）
                    clipPath: [`circle(0% at ${x}px ${y}px)`, `circle(200% at ${x}px ${y}px)`]
                },
                {
                    duration: 1000,
                    pseudoElement: '::view-transition-new(root)'
                }
            )
        })
    })
</script>

</html>